﻿/*
Copyright (C) 2008 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

function UndockedUi(gadget, container) {
  this.gadget = gadget;
  this.container = container;
  this.showAllLink = child(this.container, 'showAllLink');

  this.countryPanel = new CountryPanel(child(this.container, 'countryPanel'));
  this.eventsPanel = new EventsPanel(child(this.container, 'eventsPanel'),
      this.gadget);
  this.newsPanel = new NewsPanel(child(this.container, 'newsPanel'),
      this.gadget);

  this.tabs = new Tabs();
  var tabButtons = child(this.container, 'tabs');

  this.eventsTab = child(tabButtons, 'eventsTab');
  this.tabs.addTab(this.eventsTab, this.eventsPanel.container);
  this.countryTab = child(tabButtons, 'countryTab');
  this.tabs.addTab(this.countryTab, this.countryPanel.container);
  this.newsTab = child(tabButtons, 'newsTab');
  this.tabs.addTab(this.newsTab, this.newsPanel.container);

  this.tabs.onChange = Utils.bind(this.onTabChange, this);
  this.tabs.setActiveIndex(0);

  this.countryFlag = child(
      child(this.container, 'badge'),
      'countryFlag');
}

UndockedUi.prototype.getWidth = function() {
  return this.container.width;
};

UndockedUi.prototype.getHeight = function() {
  return this.container.height;
};

UndockedUi.prototype.show = function() {
  this.container.visible = true;
};

UndockedUi.prototype.hide = function() {
  this.container.visible = false;
};

UndockedUi.prototype.showShowAllLink = function() {
  this.showAllLink.visible = true;
};

UndockedUi.prototype.hideShowAllLink = function() {
  this.showAllLink.visible = false;
};

UndockedUi.prototype.onTabChange = function(button, panel) {
  if (button == this.eventsTab) {
    this.manageShowAllLink(this.gadget.settings);
  } else {
    this.hideShowAllLink();
  }
};


function CountryPanel(container) {
  this.container = container;
  this.viewport = child(this.container, 'viewport');
  this.table = child(this.viewport, 'table');
  this.scrollbar = child(this.container, 'scrollbar');
  this.scrollbar.onchange = Utils.bind(this.onScroll, this);

  this.controls = child(this.container, 'controls');
  this.gold = child(this.controls, 'gold');
  this.silver = child(this.controls, 'silver');
  this.bronze = child(this.controls, 'bronze');
  this.name = child(this.controls, 'name');
  this.total = child(this.controls, 'total');
  this.arrow = child(this.controls, 'arrow');
}

CountryPanel.prototype.onScroll = function() {
  this.table.y = -this.scrollbar.value;

  if (this.table.y > 0) {
    this.table.y = 0;
  }
};

CountryPanel.prototype.onMouseWheel = function() {
  if (event.wheelDelta > 0) {
    this.scrollbar.value -= this.scrollbar.lineStep;
  } else {
    this.scrollbar.value += this.scrollbar.lineStep;
  }
};

CountryPanel.prototype.setTableHeight = function(height) {
  this.table.height = height;
  this.scrollbar.max = this.table.height - this.viewport.height;

  if (this.scrollbar.value > this.scrollbar.max) {
    this.scrollbar.value = this.scrollbar.max;
  } else if (this.scrollbar.value < this.scrollbar.min) {
    this.scrollbar.value = this.scrollbar.min;
  }
};

CountryPanel.prototype.clear = function() {
  this.table.removeAllElements();
  this.setTableHeight(0);
};

CountryPanel.prototype.add = function(country) {
  var row = this.table.appendElement(UndockedUi.COUNTRY_ROW_XML);
  row.y = this.table.height;
  row.enabled = true;
  row.onmousewheel = Utils.bind(this.onMouseWheel, this);

  child(row, 'shortName').innerText = country.shortName;
  child(row, 'shortName').tooltip = country.getName();
  child(row, 'goldCount').innerText = country.goldCount;
  child(row, 'silverCount').innerText = country.silverCount;
  child(row, 'bronzeCount').innerText = country.bronzeCount;
  child(row, 'totalCount').innerText = country.getTotalCount();
  child(row, 'flag').src = country.getFlagPath();
  child(row, 'flag').tooltip = country.getName();

  this.setTableHeight(this.table.height + row.height);
};

CountryPanel.UP_ARROW_PATH = 'images/up_arrow.png';
CountryPanel.DOWN_ARROW_PATH = 'images/down_arrow.png';

CountryPanel.prototype.drawSortOrder = function(sortBy, isReverse) {
  if (sortBy == Settings.SORT_GOLD) {
    this.arrow.x = this.gold.x;
  } else if (sortBy == Settings.SORT_SILVER) {
    this.arrow.x = this.silver.x;
  } else if (sortBy == Settings.SORT_BRONZE) {
    this.arrow.x = this.bronze.x;
  } else if (sortBy == Settings.SORT_TOTAL) {
    this.arrow.x = this.total.x + 8;
  } else if (sortBy == Settings.SORT_NAME) {
    this.arrow.x = this.name.x + 8;
  }

  this.arrow.src = isReverse ? CountryPanel.DOWN_ARROW_PATH :
      CountryPanel.UP_ARROW_PATH;
};

UndockedUi.prototype.drawSortOrder = function(sortBy, isReverse) {
  this.countryPanel.drawSortOrder(sortBy, isReverse);
};

UndockedUi.prototype.drawCountries = function(countries) {
  this.countryPanel.clear();

  for (var i = 0; i < countries.length; ++i) {
    this.countryPanel.add(countries[i]);
  }
};


function EventsPanel(container, gadget) {
  this.container = container;
  this.gadget = gadget;
  this.viewport = child(this.container, 'viewport');
  this.table = child(this.viewport, 'table');
  this.scrollbar = child(this.container, 'scrollbar');
  this.scrollbar.onchange = Utils.bind(this.onScroll, this);

  this.eventsControls = child(this.container, 'eventsControls');
  this.eventsFilterContainer = child(this.container, 'filterContainer');
  this.eventsFilter = child(this.eventsFilterContainer, 'filter');
  this.eventsFilterBorder = child(this.container, 'filterBorder');
  this.eventDateLabel = child(this.eventsControls, 'eventDate');

  var allItem = this.eventsFilter.appendElement('<item>' +
      '<label valign="middle" font="Arial" size="8" x="2" height="20">' +
      strings.SHOW_ALL_EVENTS +
      '</label>' +
      '</item>');
  allItem.onclick = Utils.bind(this.gadget.setSportFilter, this.gadget, '');
  this.eventsFilter.selectedItem = allItem;

  var sports = Sport.getSports();
  var sortedSports = [];

  for (var i in sports) {
    sortedSports.push([i, sports[i]]);
  }

  sortedSports.sort(function(a, b) {
    var x = a[1];
    var y = b[1];

    return x < y ?
        -1 :
         x > y ? 1 : 0;
  });

  for (i = 0; i < sortedSports.length; ++i) {
    var code = sortedSports[i][0];
    var name = sortedSports[i][1];

    var item = this.eventsFilter.appendElement('<item />');
    var label = item.appendElement(
        '<label valign="middle" font="Arial" size="8" x="2" height="20" />');
    label.innerText = name;
    item.onclick = Utils.bind(this.gadget.setSportFilter, this.gadget, code);

    if (this.gadget.getSportFilter() == code) {
      this.eventsFilter.selectedItem = item;
    }
  }
}

EventsPanel.prototype.clearFilter = function() {
  this.eventsFilter.selectedIndex = 0;
};

EventsPanel.prototype.drawLoading = function() {
  this.clear();
  var labelXml = '<label width="78" height="30" x="13" y="5" ' +
       'font="Arial" size="8" color="#000000" bold="false" />';
  var label = this.table.appendElement(labelXml);
  label.innerText = strings.LOADING;
  this.setTableHeight(label.height);
};

EventsPanel.prototype.displayNoEvents = function(settings) {
  var label = this.table.appendElement('<label ' +
      'width="220" height="32" x="12" y="3" ' +
      'font="Arial" size="8" color="#CC3333" wordWrap="true" />');

  var text = '';

  if (settings.isFilterEvents() && settings.getSport()) {
    text = strings.NO_EVENTS_TEAM_SPORT;
  } else if (settings.getSport()) {
    text = strings.NO_EVENTS_SPORT;
  } else if (settings.isFilterEvents()) {
    text = strings.NO_EVENTS_TEAM;
  } else {
    text = strings.NO_EVENTS;
  }

  label.innerText = text;

  this.setTableHeight(label.height);

  if (settings.isFilterEvents() || settings.getSport()) {
    var removeLink = this.table.appendElement('<label ' +
        'width="95" height="16" x="12" y="35" ' +
        'enabled="true" cursor="hand" ' +
        'font="Arial" size="8" color="#2D62AF" />');
    removeLink.innerText = strings.SHOW_ALL_EVENTS;
    removeLink.onclick = Utils.bind(this.gadget.showAllEvents, this.gadget);
    this.setTableHeight(removeLink.y + removeLink.height);
  }
};

EventsPanel.prototype.onScroll = function() {
  this.table.y = -this.scrollbar.value;

  if (this.table.y > 0) {
    this.table.y = 0;
  }
};

EventsPanel.prototype.onMouseWheel = function() {
  if (event.wheelDelta > 0) {
    this.scrollbar.value -= this.scrollbar.lineStep;
  } else {
    this.scrollbar.value += this.scrollbar.lineStep;
  }
};

EventsPanel.prototype.setTableHeight = function(height) {
  this.table.height = height;
  this.scrollbar.max = this.table.height - this.viewport.height;

  if (this.scrollbar.value > this.scrollbar.max) {
    this.scrollbar.value = this.scrollbar.max;
  } else if (this.scrollbar.value < this.scrollbar.min) {
    this.scrollbar.value = this.scrollbar.min;
  }
};

EventsPanel.prototype.clear = function() {
  this.table.removeAllElements();
  this.setTableHeight(0);
};

EventsPanel.prototype.add = function(ev) {
  var row = this.table.appendElement(UndockedUi.EVENTS_ROW_XML);
  row.y = this.table.height;
  row.enabled = true;
  row.onmousewheel = Utils.bind(this.onMouseWheel, this);

  var eventRow = new EventRow(row);
  eventRow.draw(ev);

  eventRow.header.enabled = true;
  eventRow.header.onmousewheel = Utils.bind(this.onMouseWheel, this);

  if (ev.players.length) {
    eventRow.header.cursor = 'hand';
    eventRow.header.onclick = Utils.bind(this.toggleEvent, this, eventRow);
  }

  this.setTableHeight(this.table.height + row.height);
};

EventsPanel.prototype.toggleEvent = function(eventRow) {
  eventRow.toggle();

  var tableHeight = 0;

  for (var i = 0; i < this.table.children.count; ++i) {
   var row = this.table.children.item(i);
   row.y = tableHeight;
   tableHeight += row.height;
  }

  this.setTableHeight(tableHeight);

  if (eventRow.isExpanded) {
    this.scrollbar.value = eventRow.container.offsetY - 10;
  }
};

EventsPanel.prototype.drawEventDate = function(eventDate) {
  this.eventDateLabel.innerText = strings['AUG' + eventDate.getDate()];
};

function EventRow(container) {
  this.container = container;
  this.header = child(this.container, 'header');
  this.background = child(this.header, 'background');
  this.name = child(this.header, 'name');
  this.extra = child(this.header, 'extra');
  this.time = child(this.header, 'time');
  this.sportIcon = child(this.header, 'sportIcon');
  this.arrow = child(this.header, 'arrow');

  this.originalBackground = this.background.background;
  this.originalNameColor = this.name.color;
  this.originalExtraColor = this.extra.color;
  this.originalTimeColor = this.time.color;

  this.isExpanded = false;
  this.collapsedHeight = this.container.height;
  this.expandedHeight = this.container.height;

  this.header.onmouseover = Utils.bind(this.onMouseOver, this);
  this.header.onmouseout = Utils.bind(this.onMouseOut, this);
}

EventRow.OVER_FOREGROUND = '#FFFFFF';
EventRow.OVER_BACKGROUND = '#7391BD';

EventRow.prototype.drawArrow = function(isInverted) {
  if (!this.hasPlayers) {
    return;
  }

  if (isInverted) {
    if (this.isExpanded) {
      this.arrow.src = EventRow.EXPANDED_ARROW_ICON_WHITE;
    } else {
      this.arrow.src = EventRow.COLLAPSED_ARROW_ICON_WHITE;
    }
  } else {
    if (this.isExpanded) {
      this.arrow.src = EventRow.EXPANDED_ARROW_ICON;
    } else {
      this.arrow.src = EventRow.COLLAPSED_ARROW_ICON;
    }
  }
};

EventRow.prototype.onMouseOver = function() {
  this.background.background = EventRow.OVER_BACKGROUND;
  this.name.color = EventRow.OVER_FOREGROUND;
  this.extra.color = EventRow.OVER_FOREGROUND;
  this.time.color = EventRow.OVER_FOREGROUND;
  this.sportIcon.visible = false;
  this.drawArrow(true);
};

EventRow.prototype.onMouseOut = function() {
  if (this.isExpanded) {
    this.background.background = EventRow.EXPANDED_BACKGROUND;
  } else {
    this.background.background = this.originalBackground;
    this.sportIcon.visible = true;
  }
  this.drawArrow(false);
  this.name.color = this.originalNameColor;
  this.extra.color = this.originalExtraColor;
  this.time.color = this.originalTimeColor;
};

EventRow.prototype.getExpandedY = function() {
  return this.container.y + this.container.height;
};

EventRow.prototype.toggle = function() {
  if (this.isExpanded) {
    this.collapse();
  } else {
    this.expand();
  }
};

EventRow.EXPANDED_ARROW_ICON = 'images/undocked/expanded_arrow.png';
EventRow.COLLAPSED_ARROW_ICON = 'images/undocked/collapsed_arrow.png';

EventRow.EXPANDED_ARROW_ICON_WHITE = 'images/undocked/expanded_arrow_white.png';
EventRow.COLLAPSED_ARROW_ICON_WHITE =
    'images/undocked/collapsed_arrow_white.png';

EventRow.EXPANDED_BACKGROUND = 'images/undocked/expanded_bg.png';
EventRow.COLLAPSED_BACKGROUND = '#FFFFFF';

EventRow.prototype.expand = function() {
  this.isExpanded = true;
  this.container.height = this.expandedHeight;
  this.drawArrow(false);
  this.adjustBackground();
  this.sportIcon.visible = false;
};

EventRow.prototype.collapse = function() {
  this.isExpanded = false;
  this.container.height = this.collapsedHeight;
  this.drawArrow(false);
  this.adjustBackground();
};

EventRow.prototype.adjustBackground = function() {
  child(this.container, 'separator').y = this.container.height - 1;
};

EventRow.GOLD_ICON = 'images/undocked/p_gold_dot.png';
EventRow.SILVER_ICON = 'images/undocked/p_silver_dot.png';
EventRow.BRONZE_ICON = 'images/undocked/p_bronze_dot.png';

EventRow.prototype.addPlayer = function(player) {
  var row = this.container.appendElement(UndockedUi.PLAYER_ROW_XML);
  row.y = this.expandedHeight;

  child(row, 'name').innerText = player.name;
  child(row, 'name').tooltip = player.name;
  child(row, 'countryIcon').src = player.getFlagPath();
  child(row, 'countryIcon').tooltip = player.getCountryName();
  child(row, 'score').innerText = player.score;
  child(row, 'score').tooltip = player.score;

  var isMedal = false;

  if (player.isGold()) {
    child(row, 'medalIcon').src = EventRow.GOLD_ICON;
    isMedal = true;
  } else if (player.isSilver()) {
    child(row, 'medalIcon').src = EventRow.SILVER_ICON;
    isMedal = true;
  } else if (player.isBronze()) {
    child(row, 'medalIcon').src = EventRow.BRONZE_ICON;
    isMedal = true;
  }

  if (isMedal) {
    child(row, 'name').width -= child(row, 'medalIcon').srcWidth;
  }

  this.expandedHeight += row.height;
};

EventRow.IN_PROGRESS_COLOR = '#CC3333';

EventRow.prototype.draw = function(ev) {
  var players = ev.players;

  for (var i = 0; i < players.length; ++i) {
    this.addPlayer(players[i]);
  }

  if (players.length) {
    this.hasPlayers = true;
    this.drawArrow();
  }

  var title = ev.getTitle();
  var extra = '';

  if (players.length == 2) {
    extra = players[0].name + ' v. ' + players[1].name;
  } else if (players.length > 2) {
    extra = strings.INDIVIDUAL_ATHLETES;
  }

  var time = ev.localStartTime;

  if (ev.isOngoing()) {
    time = strings.IN_PROGRESS;
    this.time.color = EventRow.IN_PROGRESS_COLOR;
    this.originalTimeColor = this.time.color;
  } else if (ev.isFinish()) {
    time = strings.FINAL;
  }

  this.name.innerText = title;
  this.name.tooltip = title;
  this.extra.innerText = extra;
  this.extra.tooltip = extra;
  this.time.innerText = time;
  this.time.tooltip = ev.localStartDatetime;
  this.sportIcon.src = ev.getIconPath();
  this.sportIcon.tooltip = ev.getSportName();
};

UndockedUi.prototype.manageShowAllLink = function(settings) {
  if (settings.isEventsFiltered()) {
    this.showShowAllLink();
  } else {
    this.hideShowAllLink();
  }
};

UndockedUi.prototype.drawEvents = function(events, settings) {
  this.eventsPanel.clear();

  this.manageShowAllLink(settings);

  if (!events.length) {
    this.eventsPanel.displayNoEvents(settings);
  } else {
    for (var i = 0; i < events.length; ++i) {
      this.eventsPanel.add(events[i]);
    }
  }
};


function NewsPanel(container, gadget) {
  this.container = container;
  this.gadget = gadget;
  this.viewport = child(this.container, 'viewport');
  this.table = child(this.viewport, 'table');
  this.scrollbar = child(this.container, 'scrollbar');
  this.scrollbar.onchange = Utils.bind(this.onScroll, this);
}

NewsPanel.prototype.onScroll = function() {
  this.table.y = -this.scrollbar.value;

  if (this.table.y > 0) {
    this.table.y = 0;
  }
};

NewsPanel.prototype.onMouseWheel = function() {
  if (event.wheelDelta > 0) {
    this.scrollbar.value -= this.scrollbar.lineStep;
  } else {
    this.scrollbar.value += this.scrollbar.lineStep;
  }
};

NewsPanel.prototype.setTableHeight = function(height) {
  this.table.height = height;
  this.scrollbar.max = this.table.height - this.viewport.height;

  if (this.scrollbar.value > this.scrollbar.max) {
    this.scrollbar.value = this.scrollbar.max;
  } else if (this.scrollbar.value < this.scrollbar.min) {
    this.scrollbar.value = this.scrollbar.min;
  }
};

NewsPanel.prototype.clear = function() {
  this.table.removeAllElements();
  this.setTableHeight(0);
};

NewsPanel.prototype.add = function(item) {
  var row = this.table.appendElement(UndockedUi.NEWS_ROW_XML);
  row.y = this.table.height;
  row.enabled = true;
  row.onmousewheel = Utils.bind(this.onMouseWheel, this);
  row.cursor = 'hand';
  row.onclick = Utils.bind(this.gadget.showNewsDetails, this.gadget, item);
  row.ondblclick = Utils.bind(this.gadget.openNewsInBrowser, this.gadget, item);
  row.onmouseover = Utils.bind(this.onRowOver, this, row);
  row.onmouseout = Utils.bind(this.onRowOut, this, row);

  child(row, 'title').innerText = item.title;
  child(row, 'source').innerText = item.source;
  child(row, 'ago').innerText = item.ago;

  this.setTableHeight(this.table.height + row.height);
};

NewsPanel.TITLE_COLOR = '#336699';
NewsPanel.SOURCE_COLOR = '#666666';
NewsPanel.AGO_COLOR = '#666666';
NewsPanel.OVER_FOREGROUND = '#FFFFFF';
NewsPanel.OVER_BACKGROUND = '#7391BD';
NewsPanel.OUT_BACKGROUND = '#FFFFFF';

NewsPanel.prototype.onRowOver = function(row) {
  child(row, 'background').background = NewsPanel.OVER_BACKGROUND;
  child(row, 'title').color = NewsPanel.OVER_FOREGROUND;
  child(row, 'source').color = NewsPanel.OVER_FOREGROUND;
  child(row, 'ago').color = NewsPanel.OVER_FOREGROUND;
};

NewsPanel.prototype.onRowOut = function(row) {
  child(row, 'background').background = NewsPanel.OUT_BACKGROUND;
  child(row, 'title').color = NewsPanel.TITLE_COLOR;
  child(row, 'source').color = NewsPanel.SOURCE_COLOR;
  child(row, 'ago').color = NewsPanel.AGO_COLOR;
};

UndockedUi.prototype.drawNews = function(stories) {
  this.newsPanel.clear();

  for (var i = 0; i < stories.length; ++i) {
    this.newsPanel.add(stories[i]);
  }
};


UndockedUi.prototype.drawEventDate = function(eventDate) {
  this.eventsPanel.drawEventDate(eventDate);
};

UndockedUi.prototype.drawFlag = function(path) {
  this.countryFlag.src = path;
};


function DockedUi(container) {
  this.container = container;
  this.frame = child(this.container, 'frame');
  this.table = child(this.frame, 'table');
  this.footer = child(this.frame, 'footer');
  this.rows = [];
}

DockedUi.ROW_HEIGHT = 24;
DockedUi.MAX_ROWS = 4;

DockedUi.prototype.draw = function(countries) {
  this.table.removeAllElements();
  this.rows = [];
  this.table.height = 0;

  for (var i = 0; i < countries.length; ++i) {
    this.addRow(countries[i]);
  }

  this.resize();
};

DockedUi.prototype.addRow = function(country) {
  if (this.rows.length >= DockedUi.MAX_ROWS) {
    return;
  }

  var row = this.table.appendElement(DockedUi.ROW_XML);
  row.y = this.rows.length * DockedUi.ROW_HEIGHT;
  child(row, 'shortName').innerText = country.shortName;
  child(row, 'shortName').tooltip = country.getName();
  child(row, 'goldCount').innerText = country.goldCount;
  child(row, 'silverCount').innerText = country.silverCount;
  child(row, 'bronzeCount').innerText = country.bronzeCount;
  child(row, 'totalCount').innerText = country.getTotalCount();
  child(row, 'flag').src = country.getFlagPath();
  child(row, 'flag').tooltip = country.getName();
  this.rows.push(row);

  this.table.height = this.rows.length * DockedUi.ROW_HEIGHT;
};

DockedUi.prototype.getWidth = function() {
  return this.container.width;
};

DockedUi.prototype.getHeight = function() {
  return this.container.height;
};

DockedUi.prototype.show = function() {
  this.container.visible = true;
};

DockedUi.prototype.hide = function() {
  this.container.visible = false;
};

DockedUi.prototype.resize = function() {
  this.footer.y = this.table.y + this.table.height;
  this.frame.height = this.footer.y + this.footer.height;
  this.container.height = this.frame.y + this.frame.height;
};

DockedUi.ROW_XML = ' \
  <div width="100%" height="24" y="0"> \
    <img src="images/docked/p_row_left.png" \
      width="5" height="24" /> \
    <div background="images/docked/p_row_middle.png" \
      x="5" \
      width="141" height="24" /> \
    <img src="images/docked/p_row_right.png" \
      x="146" \
      width="4" height="24" /> \
    <img name="flag" x="6" y="5" /> \
    <img src="images/docked/bg_gold_count.png" \
      x="61" y="5" \
      width="19" height="16" /> \
    <img src="images/docked/bg_silver_count.png" \
      x="80" y="5" \
      width="18" height="16" /> \
    <img src="images/docked/bg_bronze_count.png" \
      x="98" y="5" \
      width="20" height="16" /> \
    <img src="images/docked/bg_total_count.png" \
      x="120" y="5" \
      width="23" height="16" /> \
    <label name="shortName" \
      x="28" y="4" \
      width="40" height="17" \
      font="Arial" size="8" color="#717171" bold="true" /> \
    <label name="goldCount" \
      x="62" y="4" \
      width="19" height="16" \
      font="Arial" size="8" color="#414141" bold="true" align="center" /> \
    <label name="silverCount" \
      x="81" y="4" \
      width="18" height="16" \
      font="Arial" size="8" color="#414141" bold="true" align="center" /> \
    <label name="bronzeCount" \
      x="99" y="4" \
      width="20" height="16" \
      font="Arial" size="8" color="#414141" bold="true" align="center" /> \
    <label name="totalCount" \
      x="121" y="4" \
      width="23" height="16" \
      font="Arial" size="8" color="#FFFFFF" bold="true" align="center" /> \
  </div>';

UndockedUi.COUNTRY_ROW_XML = ' \
  <div width="260" height="29"> \
    <div background="images/undocked/country_row_bg.png" \
      width="223" height="28" x="10" y="0" /> \
    <img name="flag" x="18" y="6" /> \
    <label name="shortName" width="78" height="16" x="18" y="4" \
      align="center" font="Arial" size="10" color="#3E3E3E" bold="true" /> \
    <label name="goldCount" width="24" height="16" x="122" y="4" \
      align="center" font="Arial" size="10" color="#414141" bold="true" /> \
    <label name="silverCount" width="24" height="16" x="146" y="4" \
      align="center" font="Arial" size="10" color="#414141" bold="true" /> \
    <label name="bronzeCount" width="24" height="16" x="171" y="4" \
      align="center" font="Arial" size="10" color="#414141" bold="true" /> \
    <label name="totalCount" width="24" height="16" x="199" y="4" \
      align="center" font="Arial" size="10" color="#FFFFFF" bold="true" /> \
    <div width="223" height="1" x="10" y="28" background="#F6F6F4" /> \
  </div>';

UndockedUi.NEWS_ROW_XML = '\
  <div width="260" height="50"> \
    <div name="background" width="223" height="100%" x="10" y="0" background="#FFFFFF" /> \
    <label name="title" \
      width="217" height="29" x="13" y="2" \
      align="left" font="Arial" size="8" color="#336699" bold="true" trimming="word-ellipsis" /> \
    <label name="source" \
      width="217" height="18" x="13" y="31" \
      align="left" font="Arial" size="8" color="#666666" bold="false" /> \
    <label name="ago" \
      width="217" height="18" x="13" y="31" \
      align="right" font="Arial" size="8" color="#666666" bold="false" /> \
    <div width="223" height="1" x="10" y="49" background="#F6F6F4" /> \
  </div>';

UndockedUi.EVENTS_ROW_XML = '\
  <div width="260" height="42"> \
    <div name="header" width="260" height="41"> \
      <div name="background" width="223" height="100%" x="10" y="0" background="#FFFFFF" /> \
      <img name="sportIcon" x="13" y="7" /> \
      <label name="name" width="197" height="20" x="36" y="0" \
        valign="middle" align="left" \
        font="Arial" size="8" color="#000000" bold="true" trimming="character-ellipsis" /> \
      <label name="extra" width="144" height="20" x="36" y="19" \
        valign="middle" align="left" \
        font="Arial" size="8" color="#666666" bold="false" trimming="character-ellipsis" /> \
      <label name="time" width="67" height="20" x="166" y="19" \
        valign="middle" align="right" \
        font="Arial" size="8" color="#666666" bold="false" trimming="character-ellipsis" /> \
      <img name="arrow" x="27" y="27" /> \
    </div> \
    <div name="separator" width="223" height="1" x="10" y="41" background="#F6F6F4" /> \
  </div>';

UndockedUi.PLAYER_ROW_XML = '\
  <div width="260" height="20"> \
    <img name="countryIcon" x="38" y="5" /> \
    <label name="name" width="122" height="20" x="61" y="0" \
      valign="middle" align="left" \
      font="Arial" size="8" color="#3E3E3E" bold="false" trimming="character-ellipsis" /> \
    <img name="medalIcon" x="175" y="5" /> \
    <label name="score" width="43" height="20" x="188" y="0" \
      valign="middle" align="left" \
      font="Arial" size="8" color="#3E3E3E" bold="false" trimming="character-ellipsis" /> \
  </div>';
